export const grailLayOutString = `<template>
<!-- 圣杯布局 -->
<div class="grail-layout">
  <el-divider>圣杯布局</el-divider>
  <div class="main">
    <header>头部</header>
    <main>
      <div class="middle">
        <p>两边固定当中自适应</p>
        <p>中间列完整显示</p>
        <p>中间列优先加载</p>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </main>
    <footer>底部</footer>
  </div>
  <p>浮动（float）使元素具备一行内显示的性质</p>
  <p>调整边距left(-100%),left(-30px)分别左右显示</p>
  <p>外容器padding(content内容不会被遮挡)</p>
  <p>相对定位left和right回到原有位置</p>
</div>
</template>

<script>
export default {
name: "GrailLayout",
};
</script>

<style lang="less" scoped>
@headerColor: gray;
@left-right-color: green;
.main {
color: #fff;
font-size: 12px;
header {
  line-height: 20px;
  text-align: center;
  background-color: @headerColor;
}
main {
  height: 150px;
  background-color: #fff;
  padding: 0 30px;
  .left {
    position: relative;
    left: -30px;
    width: 30px;
    height: 100%;
    background-color: @left-right-color;
    float: left;
    margin-left: -100%;
  }
  .middle {
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: skyblue;
    float: left;
    font-size: 18px;
    color: #000;
    font-family: 隶书;
    > p {
      font-size: 18px;
    }
  }
  .right {
    position: relative;
    right: -30px;
    width: 30px;
    height: 100%;
    background-color: @left-right-color;
    float: left;
    margin-left: -30px;
  }
}
footer {
  line-height: 20px;
  text-align: center;
  background: @headerColor;
}
}
</style>`

export const BFCstring=`块级格式化上下文，他是一个独立的块级渲染区域，
该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
现象：
一个盒子不设置height,当内容子元素都浮动时，无法撑起自身，
--------这个盒子没有开启BFC

#如何创建BFC

float的值不是none
position的值不是static或者relative
display的值是inline-block、flex、inline-flex
overflow: hidden

BFC的其他作用
可以取消margin塌陷
可以组织元素被其他元素覆盖
`